<template>
  <div class="four">
    <dv-border-box-3 style="width:900px;height:600px;">
      <div class="yearbox">
        <h3>年销量趋势</h3>
        <div id="bydyear" style="width:400px;height:400px;"></div>
        <div id="tslyear" style="width:400px;height:400px;"></div>
      </div>
    </dv-border-box-3>

    <dv-border-box-3 style="width:1000px;height:600px;">
      <div class="modelbox">
        <h3>车型销量情况</h3>
        <div class="h3box">
          <h3>比亚迪宋PLUS DM-i</h3>
          <h3>特斯拉Model Y</h3>
        </div>
        <dv-capsule-chart :config="bydmodel" style="width:460px;height:400px" />
        <dv-capsule-chart :config="tslmodel" style="width:460px;height:400px" />
      </div>
    </dv-border-box-3>
  </div>
</template>

<script>
export default {
  data() {
    return {
      bydmodel: {
        data: [
          {
            name: '2021款DM-i 110KM 两驱旗舰 PLUS',
            value: 1377
          },
          {
            name: '2021款DM-i 110KM 两驱旗舰型',
            value: 361
          },
          {
            name: '2021款DM-i 51KM 两驱尊荣型',
            value: 359
          },
          {
            name: '2021款DM-i 100KM 四驱旗舰 PLUS',
            value: 93
          },
          {
            name: '2021款DM-i 110KM 两驱旗舰 PLUS 5G版',
            value: 82
          },
          {
            name: '2021款DM-i 51KM 两驱尊贵型',
            value: 9
          },
          {
            name: '2021款DM-i 100KM 四驱旗舰 PLUS 5G版',
            value: 2
          },
        ],
        unit: '总计',
        showValue: true
      },
      tslmodel: {
        data: [
          {
            name: '2021款标准续航后轮驱动版',
            value: 286
          },
          {
            name: '2022款后轮驱动版',
            value: 201
          },
          {
            name: '2022款改款 后轮驱动版',
            value: 108
          },
          {
            name: '2021款长续航全轮驱动版',
            value: 66
          },
          {
            name: '2022款长续航全轮驱动版',
            value: 59
          },
          {
            name: '2021款Performance 高性能全轮驱动版',
            value: 30
          },
          {
            name: '2022款改款 长续航全轮驱动版',
            value: 27
          },
          {
            name: '2021款长续航全轮驱动版 3D3/3D7',
            value: 17
          },
          {
            name: '2022款Performance 高性能全轮驱动版',
            value: 15
          },
          {
            name: '2021款长续航全轮驱动版 3D3/3D5',
            value: 6
          },
          {
            name: '2021款改款 长续航全轮驱动版 ',
            value: 4
          },
        ],
        unit: '总计',
        showValue: true
      }
    }
  },
  methods: {
    bydyear() {
      var myChart = this.$echarts.init(document.getElementById('bydyear'));
      var option = {
        toolbox: {
          show: true,
           feature: {
            dataView: { show: true, readOnly: false },
            restore: { show: true },
            saveAsImage: { show: true, backgroundColor: 'black' }
          },
          iconStyle: {
             borderColor: 'white'
          },
          right: '30px'
        },
        title: {
          text: '比亚迪宋PLUS DM-i',
          left: 'center',
          textStyle: {
            color: 'orange'
          }
        },
        textStyle: {
          color: 'white'
        },
        legend: {
          data: ['总计'],
          left: 30,
          textStyle: {
            color: "white"
          }
        },
        xAxis: {
          type: "category",
          data: ["2021年", "2022年", "2023年数据采集时"],
          axisLabel :{
			      interval:0   
			    }, 
        },
        yAxis: {},
        series: [{
          name: '总计',
          data: [842, 1337, 104],
          type: "line",
          label: {
            show: true,
            color: 'white',
          }
        }]
      }
      myChart.setOption(option);    
    },
    tslyear() {
      var myChart = this.$echarts.init(document.getElementById('tslyear'));
      var option = {
        toolbox: {
          show: true,
           feature: {
            dataView: { show: true, readOnly: false },
            restore: { show: true },
            saveAsImage: { show: true, backgroundColor: 'black' }
          },
          iconStyle: {
             borderColor: 'white'
          },
          right: '30px'
        },
        title: {
          text: '特斯拉宋Model Y',
          left: 'center',
          textStyle: {
            color: 'orange'
          }
        },
        textStyle: {
          color: 'white'
        },
        legend: {
          data: ['总计'],
          left: 30,
          textStyle: {
            color: "white"
          }
        },
        xAxis: {
          type: "category",
          data: ["2021年", "2022年", "2023年数据采集时"],
          axisLabel :{
			      interval:0   
			    }, 
        },
        yAxis: {},
        series: [{
          name: '总计',
          data: [396, 362, 61],
          type: "line",
          label: {
            show: true,
            color: 'white',
          }
        }]
      }
      myChart.setOption(option);    
    }
  },
  mounted() {
    this.bydyear(),
    this.tslyear()
  },
}
</script>

<style lang="less" scoped>
.four {
  width: 1897px;
  display: flex;
  justify-content: space-between;
}
.yearbox {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  div {
    margin-top: 40px;
  }
}
.modelbox {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}
h3 {
  width: 100%;
  color: white;
  text-align: center;
  padding-top: 40px;
}
.h3box {
  width: 100%;
  display: flex;
  justify-content: space-between;
  h3 {
    width: 400px;
    margin-bottom: 20px;
  }
}
.rank {
  color: white !important;
}
</style>